<template>
  <div>
    <CommonHead></CommonHead>
    <div class="personal editing">
      <div class="personal-banner">
        <img src="@/assets/img/15.jpg" alt="" class="w100" />
      </div>
      <div class="con">
        <div class="clearfix">
          <PersonalLeft></PersonalLeft>
          <div class="fr personal-re">
            <ul class="personal-re-ul">
              <li class="active">
                <a href="">创作（22） </a>
              </li>
              <li>
                <a href="">收藏（22） </a>
              </li>
              <li>
                <a href=""> 动态（22） </a>
              </li>
              <li>
                <a href="">资料 </a>
              </li>
              <li>
                <a href="">更换主题</a>
              </li>
            </ul>
            <div class="personal-re-cons">
              <p class="personal-re-p">收藏</p>
            </div>
            <div class="personal-re-data clearfix">
              <div class="fr overall-btn">
                <a href="javascript:;" @click="handleEdit">编辑收藏</a>

                <a class="delCollectFolder" @click="handleDelCollectFolder">删除收藏</a>
              </div>
            </div>
            <div class="personal-div">
              <div class="row">
                <div class="col-sm-4" v-for="item in collectDetailArr" :key="item.id">
                  <div class="case-div">
                    <div class="case-img pr">
                      <a href="">
                        <img :src="baseUrl + item.image" alt="" class="w100" />
                      </a>
                      <div class="give-box pa">
                        <a href="" class="give-a"> <i class="iconfont icon-dianzan_kuai"></i> </a>
                        <!-- 移动 -->
                        <a href="javascript:;" class="shift-a" @click="handleMove(item.id)">
                          <i class="iconfont icon-yidong"></i>
                        </a>
                      </div>
                    </div>
                    <div class="case-bot">
                      <p class="case-title"><a href="">{{ item.title }}</a></p>
                      <p class="case-bq">{{ item.copyright_type }}</p>
                      <div class="case-website">
                        <a href="">企业网站</a>
                        <a href="">企业官网</a>
                      </div>
                      <div class="sculpture-box clearfix pr">
                        <div class="sculpture fl">
                          <a href="">
                            <img :src="baseUrl + item.user.avatar" alt="" class="w100" /> {{ item.user.name }}
                          </a>
                        </div>
                        <div class="fr collect">
                          <span class="collect-span">
                            <i class="iconfont icon-shoucang"></i> {{ item.collect_num }}
                          </span>
                          <span class="glance-span">
                            <i class="iconfont icon-liulan"></i> {{ item.view_num }}
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <FootCopyright></FootCopyright>
    <!-- 编辑收藏 -->
    <div class="tanchu-box" v-if="show">
      <div class="modify-avatar">
        <div class="colse pa" @click="hide">
          <i class="iconfont icon-guanbi"></i>
        </div>
        <p class="tile">编辑收藏夹</p>
        <div class="edit-box">
          <ul>
            <li>
              <p>收藏夹名称</p>
              <input type="text" placeholder="喜欢的网站" v-model="folderName" />
            </li>
            <li>
              <p>备注</p>
              <textarea v-model="notes"> </textarea>
              <p class="bz-p">URL 是超链接的。只允许 'a'。</p>
            </li>
          </ul>
        </div>
        <div class="overall-btn ta">
          <a class="savebutton" @click="handleSave(folderName, notes)">保存</a>
          <a @click="hide" class="cancel">取消</a>
        </div>
      </div>
    </div>


    <!--  移动收藏作品-->
    <div class="tanchu-box" v-if="isActive">
      <div class="modify-avatar">
        <div class="colse pa" @click="hide2">
          <i class="iconfont icon-guanbi"></i>
        </div>
        <p class="tile">移动收藏作品</p>
        <div class="edit-box">
          <ul>
            <li>
              <p>收藏夹名称</p>
              <!-- <input type="text" placeholder="喜欢的网站" /> -->

              <!-- 移动收藏作品dialog -->
              <el-select v-model="moveText" class="m-2" placeholder="选择收藏夹" size="large" @change="handleDialog(moveText)">
                <el-option v-for="item in collectFolderListArr" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>


            </li>
            <li>
              <p>备注 </p>
              <textarea> </textarea>
              <p class="bz-p">URL 是超链接的。只允许 'a'。</p>
            </li>
          </ul>
        </div>
        <div class="overall-btn ta">
          <a @click="handleSaveMover">保存</a>
          <a @click="hide2">取消</a>
        </div>
      </div>
    </div>
  </div>
</template>
  
<script>
import * as api from "@/api/users"
import { ElNotification } from 'element-plus'
export default {
  data() {
    return {
      isActive: false,
      show: false,

      // 收藏夹名称双向绑定
      folderName: "",

      // 备注双向绑定
      notes: "",

      // 收藏夹作品列表
      collectFolderListArr: [],

      // 收藏夹详情
      collectDetailArr: [],

      // 图片网址
      baseUrl: 'https://ui-mall.oss-accelerate.aliyuncs.com/',



      moveText: "",

      // 作品id
      projectId: "",


      // 收藏夹id
      collectID: "",

    }
  },
  created() {
    this.getMyCollectFoler()


    this.getCollectDetails(this.$route.query.id)


  },

  methods: {

    // 请求我的收藏夹
    async getMyCollectFoler() {
      try {
        let res = await api.myCollectFolderApi()
        this.collectFolderListArr = res.data.data
        // console.log(this.collectFolderListArr, '收藏夹列表');
      } catch (e) {
        console.log(e);
      }
    },


    // 请求收藏夹详情
    async getCollectDetails(id) {
      try {
        let res = await api.collectFolderDetailsApi(id)
        // console.log(res,8888);
        this.collectDetailArr = res.data.data.project
        console.log(this.collectDetailArr);
      } catch (e) {
        console.log(e);
      }
    },



    // 删除收藏夹接口
    async delCollectFolder(id) {
      try {
        let res = await api.delCollectFolderApi(id)
        console.log(res);
      } catch (e) {
        console.log(e);
      }
    },

    handleDelCollectFolder() {
      // 调用接口
      this.delCollectFolder(this.$route.query.id)
      console.log(this.$route.query.id);

      ElNotification({
        title: '删除成功',
        // message: 'This is a success message',
        type: 'success',
      })

      // 删除成功回到列表页
      this.$router.push('/collect')


      // 回到列表调用接口
      this.getMyCollectFoler()

    },

    // 编辑收藏夹接口
    async geteditCollectFolder(name, image, remark, id) {
      try {
        let res = api.editCollectFolderApi(name, image, remark, id)
        // console.log(res);
      } catch (e) {
        console.log(e);
      }
    },


    handleSave(n, notes) {
      console.log(name, notes)
      if (!this.folderName || !this.notes) {
        alert('请输入文件夹名称和备注')
        return
      }
      this.show = false
      this.geteditCollectFolder(n, '', notes, this.$route.query.id)
    },



    handleEdit() {
      this.show = true
    },


    // 移动作品
    handleMove(id) {
      this.isActive = true
      // console.log(id, 'id');
      this.projectId = id
      // console.log(this.projectId, '作品id');

    },


    handleDialog(e) {
      this.collectId = e
      console.log(this.collectId, '收藏夹id');
    },


    // 保存移动
    handleSaveMover() {
      // console.log(123)

      this.getMoveCollect(this.$route.query.id, this.projectId, this.collectId)
      this.isActive = false
      this.getCollectDetails(this.$route.query.id)
    },





    // 请求移动收藏接口
    async getMoveCollect(collect_folder_id, collect_id, new_collect_folder_id) {
      try {
        let res = await api.moveCollect(collect_folder_id, collect_id, new_collect_folder_id)
        console.log(e);
      } catch (e) {
        console.log(e);
      }
    },





    async hide() {
      this.show = false
    },
    async show2() {
      this.isActive = true
    },
    async hide2() {
      this.isActive = false
    }
  }
}
</script>


<style scoped lang="less">
.delCollectFolder {
  cursor: pointer;
  text-decoration: none;
}

.savebutton {
  text-decoration: none;
  cursor: pointer;
}

.cancel {
  text-decoration: none;
  cursor: pointer;
}
</style>
  
